<template>
  <a-form-model
    class="mt-6"
    ref="form"
    v-bind="{
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    }"
  >
    <a-form-model-item label="绑定状态">
      {{ user.google_auth_enable ? '已绑定' : '未绑定' }}
    </a-form-model-item>

    <a-form-model-item label="验证二维码">
      <img :src="qrcodeUrl" alt="" />
    </a-form-model-item>

    <a-form-model-item label="验证码">
      <a-input v-model="code" type="text" autocomplete="off" />
    </a-form-model-item>

    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
      <a-button type="primary" @click="onSubmit(true)"> 绑定 </a-button>
      <a-button style="margin-left: 10px" @click="onSubmit(false)">
        解绑
      </a-button>
    </a-form-model-item>
  </a-form-model>
</template>
<script>
export default {
  data() {
    return {
      code: '',
      qrcodeUrl: '',
    }
  },
  computed: {
    user() {
      return this.$store.state.account.user
    },
  },
  created() {
    this.axios.get('/google-auth/qrcode').then((res) => {
      this.qrcodeUrl = res.data.data
    })
  },
  methods: {
    onSubmit(bind) {
      if (!this.code) {
        return this.$message.error('请输入谷歌验证码')
      }
      this.axios
        .put('/google-auth/bind', {
          code: this.code,
          bind,
        })
        .then((res) => {
          if (res.data.code === 1) {
            this.$store.commit('account/gaBind', bind)
            this.code = ''
            this.$message.success('操作成功')
          } else {
            this.$message.error(res.data.msg)
          }
        })
    },
    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       this.axios.post('/google-secret/enable', this.form).then((res) => {
    //         this.$message.success('操作成功')
    //         // this.$router.push('/login')
    //       })
    //     }
    //   })
    // },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields()
    // },
  },
}
</script>
